<template>
	<view class="content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="content_main" style="padding: 10px;">
			<view class="commonBox topCellCard">
				<u-cell style="width: 50%;" v-for="item in topCellInfo" :title="item.titleName"
					:titleStyle="{padding: '10px 0',fontWeight: 600,fontSize: '14px'}" :border="false">
					<view slot="label" v-for="row in item.nood" class="topCellCard_childCell">
						<u-cell :titleStyle="{fontSize: '12px'}" :title="row.keyName" :value="String(row.keyValue)"
							:border="false"></u-cell>
					</view>
				</u-cell>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>未收款前6</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData1" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>

			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>未付款前6</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>开票分析</text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs3" lineWidth="30" :current="tabsCurrent3"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition3">
						</u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="line" :chartData="chartData3" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>





			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>收付款分析</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData4" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {
					APFunName: " "
				},

				topCellInfo: [],

				tabsCurrent: 1,
				cardData: [],
				ChartsStyle: {
					width: '100%',
					height: '240px'
				},
				chartData1: {},
				chartData2: {},


				chartData3: {},
				chartDataArr3: [],
				tabsCurrent3: 0,
				realCondition3: [{
					name: '销售发票',
				}, {
					name: '采购发票',
				}],

				chartData4: {},
			};
		},
		onLoad(option) {

			let basicInfo = this.$utils.deepClone(this.$store.state.Menu);

			this.basicInfo = this.$utils.deepClone(basicInfo) || {};

			this.getDataInfo();
		},
		methods: {
			getDataInfo() { // 获取数据
				let that = this;

				this.Request.request('plat_caiwu', {}, function(ret) { 
					if (ret.status == 200) {


						let theData = that.dataBack(ret.data.ds[0], '期初收款(万元)', '应收金额', 'QCYSmoney', '未收金额',
							'WSKMoney');
						let theData1 = that.dataBack(ret.data.ds1[0], '期初付款(万元)', '应付金额', 'QCYSmoney', '未付金额',
							'WSKMoney');
						let theData2 = that.dataBack(ret.data.ds2[0], '销售发票', '应开数量', 'FQty', '未开数量', 'WKPNum'); 
						let theData3 = that.dataBack(ret.data.ds3[0], '采购发票', '应开数量', 'FQty', '未开数量', 'WKPNum');
						let theData4 = that.dataBack(ret.data.ds4[0], '收付款(万元)', '未收款', 'SKMoney', '未付款',
							'FKMoney');

						that.topCellInfo = [theData, theData1, theData2, theData3, theData4];


						// 饼图
						let filterData1 = ret.data.ds5.filter(item => {
							return item.ClientName
						});
						let chartData1 = filterData1.map(item => {
							return {
								name: item.ClientName,
								value: +item.Rate || 0,
								type: 'pie',
							}
						});
						that.chartData1 = {
							ds5: chartData1
						}




						// 饼图
						let filterData2 = ret.data.ds6.filter(item => {
							return item.SupplyName
						});
						let chartData2 = filterData2.map(item => {
							return {
								name: item.SupplyName,
								value: +item.Rate || 0,
								type: 'pie',
							}
						});
						that.chartData2 = {
							ds6: chartData2
						}


						// 折线图
						let allData_ds7 = that.transformData(ret.data.ds7, 'line', 'month', 'FQty', 'WKNum');
						let allData_ds8 = that.transformData(ret.data.ds8, 'line', 'month', 'FQty', 'WKNum');

						that.chartDataArr3 = [allData_ds7, allData_ds8];
						that.chartData3 = {
							ds7: that.chartDataArr3[that.tabsCurrent3]
						}



						// 柱状图-采购数量分析
						let chartData4 = that.transformData(ret.data.ds9, 'column', 'month', 'FKMoney',
							'SKMoney', {
								aText: '应付金额',
								bText: '应收金额',
							});
						that.chartData4 = {
							ds7: chartData4
						}


					}

				});

			},
			dataBack(data, keyTitle, keyName1, key1, keyName2, key2) {

				let obj = {
					keyName: keyName1,
					keyValue: data[key1]
				}

				let obj1 = {
					keyName: keyName2,
					keyValue: data[key2]
				}

				let backData = {
					titleName: keyTitle,
					nood: [obj, obj1]
				}

				return backData;

			},
			transformData(data, type = 'line', dateKey = 'month', ckQtyKey = 'FQty', rkQtyKey = 'Qty', leng = {
				aText: '应开数量',
				bText: '未开数量',
			}) {
				const result = [];

				// 检查数据是否为数组  
				if (!Array.isArray(data)) {
					throw new Error('Input data must be an array');
				}

				// 遍历原始数据  
				data.forEach(item => {

					result.push({
						seriesName: leng.aText,
						name: item[dateKey],
						value: item[ckQtyKey] || 0,
						type: type
					});

					result.push({
						seriesName: leng.bText,
						name: item[dateKey],
						value: item[rkQtyKey] || 0,
						type: type
					});

				});

				return result;
			},
			changeTopTabs3(data) { // 切换销售分析 销量、销售额
				this.tabsCurrent3 = data.index;

				this.chartData3 = {
					ds7: this.chartDataArr3[this.tabsCurrent3]
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f2f2;
	}

	::v-deep.u-cell__body {
		padding: 4px 15px !important;
	}

	// 待办/实时数据横向滚动
	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			min-width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	::v-deep.u-tabs__wrapper__nav__item {
		height: 30px !important;
	}

	.topCellCard {
		zoom: .8 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		background-color: rgba(139, 207, 141, .6) !important;

		&_childCell {
			background-color: #f3f3f3;
			border-radius: 4px;
			margin-bottom: 4px;
		}
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 16px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}

	.charts-box {
		width: 100%;
		height: 240px;
	}
</style>